<template>
    <div class="pageContainer" ref="el">
        <el-container class="bg-white rounded-lg">
            <el-header class="flex items-center justify-start" style="border-bottom: 1px solid #eeeeee;">
                <el-button type="primary"  @click="onAddCatogery">新增图片分类</el-button>
                <el-button type="warning"  @click="onAddImg">上传图片</el-button>
            </el-header>
            <el-container>
                <ImageAside ref="imageAsideRef" :cHeight="cHeight" @current-change="onChange"/>
                <ImageMain ref="imageMainRef" :categoryId="categoryId" :cHeight="cHeight"/>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { useResizeObserver } from '@vueuse/core'

import ImageAside from '../../components/ImageAside.vue'
import ImageMain from '../../components/ImageMain.vue'
const imageAsideRef = ref(null)

const cHeight = ref(0)
const el = ref(null)

// 计算Image内容区域高度
const calHeight = () => {
    const windowHeight = window.innerHeight || document.body.clientHeight
    cHeight.value = windowHeight - 60 - 40 - 170
}
calHeight()

// 监听el组件，即整个内容页面组件的尺寸发生变化
useResizeObserver(el, (entries) => {
    calHeight()
})

const imageMainRef = ref(null)
const categoryId = ref(0)
// 分类选中变化事件
const onChange = (id) => {
    categoryId.value = id
}

// 新增图片分类
const onAddCatogery = () => {
    imageAsideRef.value.addCatoyery()
}

// 新增图片上传
const onAddImg = () => {
    imageMainRef.value.openUploadFile()
}

</script>
<style scoped>

</style>